@extends('template.layout')

@section('resources')
    <script src="//imgcache.qq.com/open/qcloud/video/vcplayer/TcPlayer-2.2.1.js" charset="utf-8"></script>
    <title>久趣英语 | 100%北美外教 让孩子爱上英语</title>
@stop


@section('content')
    <div class="bg scroll-point">
        <div class="screen-slides">
            <div class="left-slide">
                <img src='https://static-app.97kid.com/site-student/public/img/bg_left.png'>
            </div>
            <div class="right-slide">
                <img src='https://static-app.97kid.com/site-student/public/img/bg_right.png'>
            </div>
        </div>
        <div class="cover">
            <div class="b">严选北美外教</div>
            <div class="m">在线授课</div>
            <div class="s"><span>4-12</span> 岁适用 / 四人班 <span>35元</span> / 二人班 <span>65元</span></div>
            <div style="position: relative">
                <img class="" src="{{env('CDN_RESOURCE')}}/img/family.png">
                <div style="position: absolute; left: calc(50% - 40px ); top:calc(40% - 40px);cursor:pointer;" class="play-icon" id="viewVideo"></div>
            </div>
        </div>

    </div>


    <div class="features">
        <div class="item">
            <div class="graduation-icon icon"></div>
            <span>严选北美外教</span>
        </div>
        <div class="item">
            <div class="interest-icon icon"></div>
            <span>趣味教学场景</span>
        </div>
        <div class="item">
            <div class="level-icon icon"></div>
            <span>科学分级课程体系</span>
        </div>
    </div>


    <div class="page-section flap-animation" style="visibility: visible;animation-delay:0.1s;animation-name:fadeInUp;">
        <div class="graduation-icon-c icon"></div>
        <div class="header">严选北美外教</div>

        <div class="home-teacher">
            <div class="statistic">
                <div class="item">
                    <span class="u">1%</span>
                    <span class="d">考核通过率</span>
                </div>
                <div class="item">
                    <span class="u">100%</span>
                    <span class="d">来自美国, 加拿大</span>
                </div>
                <div class="item">
                    <span class="u">95+</span>
                    <span class="d">家长评分</span>
                </div>
            </div>
            <img src='{{env('CDN_RESOURCE')}}/img/teacher.png'>
        </div>
    </div>

    <div class="page-section ">
        <div class="interest-icon-c icon"></div>
        <div class="header">趣味教学场景</div>
        <div class="desc">孩子到久趣的第一个转变 - 主动上课</div>

        <div class="home-teaching">
            <img src='{{env('CDN_RESOURCE')}}/img/teaching.png'>
        </div>
        <div class="lesson-steps">
            <div class="item">
                <div class="photo-icon"></div>
                <span class="small">丰富动画</span>
            </div>

            <div class="item">
                <div class="game-icon"></div>
                <span class="small">游戏化</span>
            </div>

            <div class="item">
                <div class="thumbsup-icon"></div>
                <span class="small">同伴激励</span>
            </div>
        </div>
    </div>


    <div class="page-section ">
        <div class="level-icon-c icon"></div>
        <div class="header">科学分级课程体系</div>
        <div class="desc">基于欧洲语言共同框架（CEFR）独家研发，与中国公立小学新课标教材接轨，更适合中国孩子学习</div>
        @include('partial.courseSystem')
    </div>

    <div class="page-section  " id="lessonPlan">
        <div class="header">
            特惠报名，承诺180天无条件退款
        </div>
        <div class="desc" style="font-size: 20px;margin: 50px auto 50px auto;">
            精品2、4人班，每节课30分钟，报名后即可上课
        </div>

        <div class="lesson-plan">
            @foreach($products as $product)
                <a class="plan-detail product_{{$product['p_id']}}" href="{{$product['p_id'] != 1 && $limit && $limit['day'] > 0 ? 'javascript:;' : '/order/' . $product['p_id']}}">
                    <div>
                        <div class="fee">
                            ¥ <span class="money">{{$product['total']}}</span><br/>
                            <span style="font-size: 15px;">{{isset($product['remark') ? $product['remark' : '']}}&nbsp;</span>
                        </div>

                        <table class="schedule">
                          <tr>
                            <td class="tick" width="40px"></td>
                            <td>{{$product['gift']}}</td>
                          </tr>
                          <tr>
                            <td class="tick" width="40px"></td>
                            <td>{{$product['four']}}</td>
                          </tr>
                          <tr>
                            <td class="tick" width="40px"></td>
                            <td>{{$product['two']}}</td>
                          </tr>
                        </table>

                        <div class="buy-now">
                            {{$product['p_id'] != 1 && $limit && $limit['day'] > 0 ? '待开放' : '立即购买'}}
                        </div>
                        <div class="buy-tip" style="display: {{$limit && $limit['day'] > 0 ? 'block' : 'none'}}; visibility: {{$product['p_id'] == 1 ? 'hidden' : 'visible'}}">{{$limit['next']}} 开放报名</div>


                        {{--<div class="ani-bg">--}}

                        {{--</div>--}}
                    </div>
                </a>
            @endforeach

        </div>
    </div>


    <div class="page-section ">
        <div class="header">简单3步, 立即上课</div>

        <div class="lesson-steps">
            <div class="item">
                <div class="ok-icon"></div>
                <span>账户充值</span>
            </div>

            <div class="item">
                <div class="chat-icon"></div>
                <span>微信约课</span>
            </div>

            <div class="item">
                <div class="tv-icon"></div>
                <span>进入教室</span>
            </div>
        </div>

    </div>

    <div class="page-section ">
        <div class="header">家长说</div>

        <div class="slide">
            <div class="slide-left">
                <div class="arrow-left-icon"></div>
            </div>


            <div class="slide-window">
                <ul class="parents-review  " id="slideList">
                    <li>
                        <div class="review">
                            <div class="marks icon"></div>
                            <p>
                                孩子对语言很敏感，正处在学习的关键时期，我希望他从小就接触纯正的表达。久趣的外教们发音很标准，每次上课，孩子都会模仿着外教的语音语调大声说，很不错！
                            </p>

                            <img src='{{env('CDN_RESOURCE')}}/img/avatar1.png'>
                            <div class="who">Mike 的爸爸</div>
                        </div>
                    </li>

                    <li>
                        <div class="review">
                            <div class="marks icon"></div>
                            <p>
                                我们家小孩喜欢和朋友们一起学，偶尔自己一个人上课还不习惯了。其他小朋友发言的时候，我发现他都在专注地跟着思考、跟着说，一节课下来基本就掌握知识点了，学习效率提高了不少。
                            </p>

                            <img src='{{env('CDN_RESOURCE')}}/img/avatar2.png'>
                            <div class="who">lorna 的爸爸</div>
                        </div>
                    </li>

                    <li>
                        <div class="review">
                            <div class="marks icon"></div>
                            <p>
                                上课氛围非常棒，久趣的课程很适合小朋友学习语言。上课时孩子总能被丰富的教学场景和游戏所吸引，边学边跟着大声说，兴趣很高，经常我下班回来，还没进家门就听见他的声音了。
                            </p>

                            <img src='{{env('CDN_RESOURCE')}}/img/avatar3.png'>
                            <div class="who">Steve 的妈妈</div>
                        </div>
                    </li>

                    <li>
                        <div class="review">
                            <div class="marks icon"></div>
                            <p>
                                喜欢久趣，我们家一天一节课，小孩主动要求的，经常自己上完全程课，完全没让我帮忙。高频率的输入，再加上感兴趣，明显能感觉到听力和口语的进步。说久趣的课很好玩，不累，现在上课倒成了他每天期待的一件事！
                            </p>

                            <img src='{{env('CDN_RESOURCE')}}/img/avatar4.png'>
                            <div class="who">Vincent 的爸爸</div>
                        </div>
                    </li>

                    <li>
                        <div class="review">
                            <div class="marks icon"></div>
                            <p>
                                久趣的外教对待小朋友很耐心，我们家零基础的宝贝，也能够通过外教的表情和肢体动作，理解和掌握上课内容，看得出来外教都有认真备课的。

                            </p>

                            <img src='{{env('CDN_RESOURCE')}}/img/avatar5.png'>
                            <div class="who">Alina 的妈妈</div>
                        </div>
                    </li>


                </ul>
            </div>

            <div class="slide-right">
                <div class="arrow-right-icon"></div>
            </div>

        </div>
    </div>


    <style>
        .vcp-player { margin: 0 auto; }
    </style>
    <div class="video-mask" id="videoMask">
        <div class="close-icon icon" id="closeVideo"></div>
        <div id="videoContainer" class="video">
        </div>
    </div>

@stop


@section('script')
    <script type="text/javascript">
        $(document).ready(function (fn) {


            @if( isset($buyPlan) )
              $('html, body').animate({
                scrollTop: 3500
            }, 1000);
            @endif

            @if( Request::path() == '/' )
                $('#hBuyBtn').click(function () {
                $('html, body').animate({
                    scrollTop: 3500
                }, 1000);
            });
            @endif


            $('.level span').hover(function () {

                $(this).addClass('active-level');
                $(this).siblings('span').removeClass('active-level');
                var levelIndex = $(this).index();
                $('.level-info table').eq(levelIndex).addClass('active-level-info');
                $('.level-info table').eq(levelIndex).siblings('table').removeClass('active-level-info');
            });


            var timeout;
            $(document).bind("scroll", function () {

                clearTimeout(timeout);
                timeout = setTimeout(function () {

                    $('.page-section').each(function () {
                        if ($(window).scrollTop() > $(this).offset().top - 400) {

                            if ($(this).css('visibility') === 'hidden') {
                                $(this).css('visibility', 'visible').css('animation-delay', '0.2s').css('animation-name', 'fadeInUp');
                            }
                        }
                    })
                }, 0);
            });

            var currentIndex = 0;
            $('.slide-left').click(function () {
                if (currentIndex > 0)
                    currentIndex--;
                $('#slideList li').eq(currentIndex).fadeIn().siblings('li').hide();
            });

            $('.slide-right').click(function () {
                if (currentIndex < 6)
                    currentIndex++;
                $('#slideList li').eq(currentIndex).fadeIn().siblings('li').hide();
            });

            $('.plan-detail').hover(function () {
                $(this).addClass('plan-detail-hover');
            }, function () {
                $(this).removeClass('plan-detail-hover');
            });

            //初始化视频
            var player = new TcPlayer(
            //页面放置播放位置的元素 ID
            "videoContainer",
            {
              "m3u8": "https://1251352844.vod2.myqcloud.com/45f5686avodtransgzp1251352844/3b4dc3f34564972818953227732/v.f20.mp4",
              "autoplay" : false,
              "coverpic" : "",
              "width" :  '640',
              "height" : '480',
              "live": false,
              "systemFullscreen" : true
            });

            //观看视频
            $('#viewVideo').click(function () {
                $('#videoMask').fadeIn(300);
            });

            //关闭视频
            $('#closeVideo').click(function () {
                player.pause();
                $('#videoMask').fadeOut(300);
            });


        })
    </script>
@stop